<template>
  <div class="layout">
  <div class="layout-container">
    <leftLayer
      v-if="toolIsShow"
      ref="leftLayer"
      :pageInfoList="pageInfoList"
      :curPageIndex="curPageIndex"
      :layerController="layerController"
      :curLayerIndex="curLayerIndex"
      @pageClick="pageClick"
      @createNewPage="createNewPage"
      @layerClick="layerClick"
      @deletePage="deletePage"
    ></leftLayer>

    <div
      class="layout-left-fold"
      :style="{ width: widthLeftForToolsHideButton + 'px' }"
      @click="toolIsShow = !toolIsShow"
    >
      <i class="el-icon-arrow-right" />
    </div>

    <div
      class="layout-middle"
      :style="{
          width: middleWidth + 'px',
          height: middleHeight + 'px'
        }"
    >
      <top-menu
        :pageInfoList="pageInfoList"
        :currentSizeRangeIndex="currentSizeRangeIndex"
        :scaleNum="scaleNum"
        @changePageInfoList="changePageInfoList"
        @setSize="setSize"
      ></top-menu>
      <CenterController
        :controllerTools="controllerTools"
        @controllerOnDragged="controllerOnDragged"
      >
      </CenterController>

      <middleWorkspace
        ref="middleWorkspace"
        :cur-layer-index="curLayerIndex"
        :middleWidth="middleWidth"
        :middleHeight="middleHeight"
        :page-info="pageInfoList[curPageIndex]"
        :controllerInfoList="controllerInfoList"
        :currentSizeRangeIndex="currentSizeRangeIndex"
        :scaleNum="scaleNum"
        @change="changeOptions"
        @controllerClick="onControllerClick"
        @ScaleNumChange="scaleNumChange"
      >
      </middleWorkspace>

    </div>

    <right-config
      :controller-options="controllerConfig"
      @controllerValueChanged="controllerValueChanged"
    >
    </right-config>


  </div>

  </div>
</template>

<script>
  import leftLayer from "./layout/leftLayer";
  import middleWorkspace from "./layout/middleWorkspace";

  import { getInfoByProgramCode } from "@/api/publish/mipsProgramInfo";
  import RightConfig from "./layout/rightConfig";
  import CenterController from "./layout/centerController"
  import TopMenu from "./layout/topMenu";

  import { controllerTools, getToolByCode } from "./config/index.js";
  import {
    handleDefaultValue,
    setDefaultValue,
    handlerLayerController,
    handleInitProgramData,
    handleBigScreen,
    getOptionsValueByLabel
  } from "./util/common";
  import {backgroundConfig} from "./config/base/backgroundConfig";

  export default {
    components: {
      TopMenu,
      RightConfig,
      leftLayer,
      middleWorkspace,
      CenterController,
    },
    data() {
      return {
        pageInfoList:[],
        curPageIndex: 0,
        widthLeftForTools: 200,
        widthRightForOptions:300,
        widthLeftForToolsHideButton: 18,
        toolIsShow: true, // 左侧工具栏是否显示
        controllerConfig: {
          setting:[],
          pos:[],
          data:[]
        },
        controllerTools: controllerTools,
        controllerInfoList:[],
        layerController:[],
        curLayerIndex:0,
        screenCode: "screen",
        currentSizeRangeIndex: -1, // 当前是哪个缩放比分比,
        scaleNum: 0, // 当前缩放百分比的值

      }
    },
    computed:{
      // 网页高度
      bodyWidth() {
        return document.body.clientWidth
      },
      // 网页宽度
      bodyHeight() {
        return document.body.clientHeight
      },
      middleWidth() {
        let widthLeftAndRight = 0;
        if (this.toolIsShow) {
          widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度
        }
        widthLeftAndRight += this.widthLeftForToolsHideButton; // 左侧工具栏折叠按钮宽度
        widthLeftAndRight += this.widthRightForOptions; // 右侧配置栏宽度

        let middleWidth = this.bodyWidth - widthLeftAndRight;
        return middleWidth;
      },
      // 中间设计器的高度
      middleHeight() {
        return this.bodyHeight-150;
      },

    },
    mounted() {
      this.init();
    },
    watch: {
      controllerInfoList: {
        handler(val) {
          this.layerController = handlerLayerController(val, getToolByCode);
        },
        deep: true
      }
    },
    methods:{
      init() {
        const programCode = this.$route.query.programCode;
        getInfoByProgramCode(programCode).then(res => {
          this.pageInfoList = handleInitProgramData(res.data, getToolByCode);
          handleBigScreen(this.pageInfoList[this.curPageIndex],
            getToolByCode,
            this.setOptionsOnClickScreen
          );
          if (this.pageInfoList.length == 0){
            // 默认创建
            this.createNewPage();
          } else {

            this.curPageIndex = 0;
            this.controllerInfoList = this.pageInfoList[this.curPageIndex].controllerInfoList;
          }
        });
      },
      createNewPage() {
        var pageObj = new Object();
        pageObj.pageName = "新页面";
        pageObj.backgroundColor = "#000";
        pageObj.width = 1920;
        pageObj.height = 1080;
        this.pageInfoList.push(pageObj);
        this.curPageIndex = this.pageInfoList.length - 1;
      },
      pageClick(index) {
        this.curPageIndex = index;
        // 判断是否越界 越界取最后一个
        if (index == this.pageInfoList.length) {
          this.curPageIndex = this.pageInfoList.length - 1;
        }
        this.controllerInfoList = this.pageInfoList[this.curPageIndex].controllerInfoList || new Array();
        handleBigScreen(this.pageInfoList[this.curPageIndex], getToolByCode,
          this.setOptionsOnClickScreen)
      },
      layerClick(index) {
        this.curLayerIndex = index;
        this.$refs.middleWorkspace.controllerClick(index);
      },

      // 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
      controllerOnDragged(controllerCode) {
        let widgetType = controllerCode;
        let workspace = document.getElementById("workspace");
        let workspaceWidth = workspace.offsetWidth;
        let workspaceHeight = workspace.offsetHeight;

        // 复制一个组件
        let tool = getToolByCode(widgetType);
        let x = (workspaceWidth - getOptionsValueByLabel("宽度", tool.options))/2;
        let y = (workspaceHeight - getOptionsValueByLabel("高度", tool.options))/2;

        let controllerJson = {
          type: widgetType,
          value: {
            setting: {},
            data: {},
            pos: {
              width: 0,
              height: 0,
              left: x,
              top: y,
              zIndex: 0
            }
          },
          options: tool.options
        };

        // 处理默认值
        const controllerJsonValue = handleDefaultValue(controllerJson);

        // 将选中的复制组件，放到工作区中去
        if (!this.pageInfoList[this.curPageIndex].controllerInfoList) {
          this.pageInfoList[this.curPageIndex].controllerInfoList = new Array();
        }
        let arr = this.pageInfoList[this.curPageIndex].controllerInfoList;
        arr.push(this.deepClone(controllerJsonValue));
        this.pageInfoList[this.curPageIndex].controllerInfoList = arr;
        this.controllerInfoList = arr;

        // 激活新组件的配置属性
        this.$refs.middleWorkspace.setOptionsOnClickWidget(this.pageInfoList[this.curPageIndex].controllerInfoList.length - 1);
      },
      changeOptions(controllerConfig, screenCode) {

        this.screenCode = screenCode;
        this.controllerConfig = controllerConfig;
      },
      // 将当前选中的组件，右侧属性值更新
      controllerValueChanged(key, val) {
        if (this.screenCode == "screen") {
          this.pageInfoList[this.curPageIndex].width = val.width;
          this.pageInfoList[this.curPageIndex].height = val.height;
          this.pageInfoList[this.curPageIndex].backgroundColor = val.backgroundColor;
          this.pageInfoList[this.curPageIndex].backgroundImage = val.backgroundImage;
          this.pageInfoList[this.curPageIndex].pageName = val.pageName;
        } else {
          for (let i = 0; i < this.controllerInfoList.length; i++) {
            if (this.curLayerIndex == i) {
              this.controllerInfoList[i].value[key] = (val);
              setDefaultValue(this.controllerInfoList[i].options[key], val);
            }
          }
        }
      },
      onControllerClick(index) {
        this.curLayerIndex = index;
      },
      // 如果是点击大屏设计器中的底层，加载大屏底层属性
      setOptionsOnClickScreen() {
        this.screenCode = "screen";
        this.controllerConfig = {};
        this.$set(this.controllerConfig, 'setting', backgroundConfig["options"].setting);
      },
      changePageInfoList(record) {
        this.pageInfoList = record;
        this.controllerInfoList = this.pageInfoList[this.curPageIndex].controllerInfoList;
      },
      scaleNumChange(scaleNum, index) {
        this.scaleNum = scaleNum;
        this.currentSizeRangeIndex = index
      },
      setSize(num) {
        this.$refs.middleWorkspace.setSize(num)
      },
      // 删除页面
      deletePage(index) {
        this.pageInfoList.splice(index, 1)
        // this.curPageIndex = this.pageInfoList.length - 1;
        // this.controllerInfoList = this.pageInfoList[this.curPageIndex].controllerInfoList || new Array();
      }
    }

  };
</script>

<style scoped lang="scss">
  .layout {
    width: 100%;
    height: 100%;
    background: #242a30;
    color: #fff;

    .layout-container {
      width: 100%;
      height: calc(100vh - 40px);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      overflow: hidden;

      .layout-left-fold {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 100%;

        font-size: 12px;
        overflow: hidden;
        background-color: #242a30;
        cursor: pointer;
        padding-top: 26%;

        i {
          font-size: 18px;
          width: 18px;
          height: 23px;
          margin-left: 0px;
          color: #bfcbd9;
        }
      }

      .layout-middle {
        // display: flex;
        position: relative;
        //width: calc(100% - 445px);
        height: 100%;
        background-color: rgb(36, 42, 48);
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border: 1px solid rgb(36, 42, 48);
        align-items: center;
        vertical-align: middle;
        text-align: center;
      }
      .layout-right {
        width: 300px;
      }

      ::v-deep .el-tabs--border-card {
        border: 0;
        .el-tabs__header {
          background: transparent;
          .el-tabs__nav {
            width: 100%;
            .el-tabs__item {
              background-color: #242f3b;
              border: 0px;
              font-size: 12px;
              width: 50%;
              .icon {
                margin-right: 4px;
              }
            }

            .el-tabs__item.is-active {
              background-color: #31455d;
            }
          }
        }

        .el-tabs__content {
          background-color: #242a30;
          height: calc(100vh - 80px);
          overflow-x: hidden;
          overflow-y: auto;
          .el-tab-pane {
            color: #bfcbd9;
          }

          &::-webkit-scrollbar {
            width: 5px;
            height: 14px;
          }

          &::-webkit-scrollbar-track,
          &::-webkit-scrollbar-thumb {
            border-radius: 1px;
            border: 0 solid transparent;
          }

          &::-webkit-scrollbar-track-piece {
            /*修改滚动条的背景和圆角*/
            background: #29405c;
            -webkit-border-radius: 7px;
          }

          &::-webkit-scrollbar-track {
            box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
          }

          &::-webkit-scrollbar-thumb {
            min-height: 20px;
            background-clip: content-box;
            box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
          }

          &::-webkit-scrollbar-corner {
            background: transparent;
          }

          /*修改垂直滚动条的样式*/
          &::-webkit-scrollbar-thumb:vertical {
            background-color: #00113a;
            -webkit-border-radius: 7px;
          }

          /*修改水平滚动条的样式*/
          &::-webkit-scrollbar-thumb:horizontal {
            background-color: #00113a;
            -webkit-border-radius: 7px;
          }
        }
      }
    }
  }
</style>
